<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="2">
    <tr>
        <td>照片:</td>
        <td id="pic_td"><img src="" alt=""></td>
    </tr>

    <tr>
        <td>姓名:</td>
        <td id="name_td"></td>
    </tr>
    <tr>
        <td>年龄:</td>
        <td id="age_td"></td>
    </tr>
    <tr>
        <td>爱好:</td>
        <td id="aihao_td"></td>
    </tr>
</table>
<input type="button" value="请求数据" onclick="f()">

<script>
    function f() {
        //创建对象,模拟从服务器中请求信息
    let xinxi = {pic:"mayun.jpeg",name:"马云",age:50,aihao:["吹买","不爱钱","装"]};
        //把对象里的信息展示到页面中
        let name_td = document.querySelector("#name_td");
        let age_td = document.querySelector("#age_td");
        let aihao_td = document.querySelector("#aihao_td");
        let img = document.querySelector("img");

        img.src=xinxi.pic;
        name_td.innerText = xinxi.name;
        age_td.innerText = xinxi.age;
        for (let item of xinxi.aihao) {
            let  li = document.createElement("li");
            li.innerText = item;
            aihao_td.append(li);
        }



    }
</script>
</body>
</html>